<template>
  <div class="my-pass">
    <el-table
            :data="handle_rate"
            style="width:100%"
            height=190px
            :row-style='tableRowStyle'
            :header-cell-style="tableHeaderColor">
      <el-table-column
              prop="Receiver"
              label="接收者"
              width="140">
      </el-table-column>
      <el-table-column
              prop="shotAssists"
              label="创造机会"
              sortable
              width="140">
      </el-table-column>
      <el-table-column
              prop="Assists"
              label="助攻"
              sortable
              width="140">
      </el-table-column>
      <el-table-column
              prop="rate"
              label="助攻转化率"
              sortable
              width="140">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "KeyPassTableData",
    props:{
      table:{
        type:Array,
        default(){
          return []
        }
      }
    },
    data() {
      return {
      }
    },
    methods:{
      //设置表格行的样式
      tableRowStyle({row,rowIndex}){
        return {'background-color':'#F1F6F9'}
      },

      //设置表头的样式
      tableHeaderColor({row,column,rowIndex,columnIndex}){
        return {'background-color':'#F1F6F9'}
      },

      //合计规则函数
      getSummaries(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column,index)=>{
          const values = data.map((item) =>{
            return item[column.property]
          });
          switch (index) {
              //第一列 '合计/均值'
            case 0:
              sums[index] = '合计/均值';
              break;
              //第4列  成功率是求均值
            case 3:
              //合计规则不是简单求和 而是求平均值
              //reduce记得给个初始的累加值,否则第一个数没有经过处理直接用 '79.0%'去计算
              const values_sum = values.reduce((accumulator,currentValue) => accumulator + parseFloat(currentValue),0);
              //求平均数
              sums[index] = values_sum / values.length;
              //四舍五入
              sums[index] = Math.round(sums[index] * 10) / 10 +'%';
              break;
              //剩下所有列 默认是求和
            default:
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              },0);
          }
        });
        return sums
      }

    },
    computed:{
      handle_rate(){
        return this.table.map(item=>{
          return {
            ...item,
            rate: Math.round(item.Rate*10000)/100 + "%"
          }
        })
      }
    },
  }
</script>

<style scoped>
  .my-pass {
    width: 560px;
    height: 190px;
    color:#656F73;
    background-color: blue;
  }
  .el-table {
    /*margin-top: 5px;*/
    /*border-color: red;*/
    font-size: 11px;
    /*line-height: 10px;*/
    background-color: #B500FE;
    /*font-weight: bold;*/
  }
  .my-pass /deep/ .el-table td {
    padding: 10px 0 ; /*no*/
  }
  .my-pass /deep/ .is-leaf {
    padding: 11px 0 ; /*no*/
  }
</style>